<template>
  <div class="data-card">
    <img :src="customImgUrl(url || '', 329, 203)" alt="" />
    <div class="data-card-info">
      <div>{{ sizeFilter(size) }}</div>
      <div>{{ resolution }}</div>
    </div>
    <i class="iconfont icon-eye-line" @click="handlePreview()"></i>
    <a-checkbox class="checkbox" :value="value" />
  </div>
  <!-- <a-image
    :width="200"
    :style="{ display: 'none' }"
    :preview="{
      visible,
      onVisibleChange: handlePreview
    }"
    :src="sourceUrl"
  /> -->
  <preview-modal ref="previewModalRef" />
</template>

<script setup lang="ts">
  import { sizeFilter } from 'g6-fn'
  import { ref } from 'vue'

  import PreviewModal from '@/components/PreviewModal/index.vue'
  import { customImgUrl } from '@/utils'

  export interface DefaultGraphProps {
    title: string
    size: number
    resolution?: string
    value: string | number
    url: string
    sourceUrl?: string
  }

  const props = withDefaults(defineProps<DefaultGraphProps>(), {
    size: 0,
    resolution: '1920*1080',
    value: '',
    sourceUrl: ''
  })
  /*---------------------------------------------------------------- 预览 --------------------------------*/
  const previewModalRef = ref<InstanceType<typeof PreviewModal>>()
  // const visible = ref<boolean>(false)
  const handlePreview = () => {
    // console.log(value, '5')
    // visible.value = value
    previewModalRef.value?.open({
      type: 'image',
      url: props.sourceUrl,
      title: props.title
    })
  }
</script>

<style lang="less" scoped>
  .data-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 4px;
    width: 100%;
    height: 100%;
    background: #fafafa;
    border-radius: 6px;
    flex-direction: column;
    gap: 4px 0;
    cursor: pointer;

    > img {
      display: block;
      width: 100%;
      height: 83px;
      background: #fff;
      border-radius: 2px;
      object-fit: cover;
    }

    > i {
      position: absolute;
      top: 50%;
      display: none;
      font-size: 16px;
      color: rgba(255, 255, 255, 1);
      transform: translateY(-50%);

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 35px;
        height: 35px;
        transform: translate(-50%, -50%);
        content: '';
      }
    }

    .checkbox {
      position: absolute;
      top: 6px;
      right: 6px;
    }

    .data-card-info {
      display: flex;
      width: 100%;

      > div {
        width: 50%;
        font-size: 12px;
        text-align: start;
        font-weight: 400;
        line-height: 20px;

        &:first-child {
          color: rgba(0, 0, 0, 0.75);
        }

        &:last-child {
          text-align: end;
          color: rgba(17, 22, 31, 0.52);
        }
      }
    }

    &:hover {
      background: rgba(0, 0, 0, 0.08);

      > i {
        display: block;
      }
    }
  }
</style>
